<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>走吧去旅行</title>
    <div  id="shadow"></div>
    <script src="jquery-1.11.3.js"></script >
<style>
    *{margin:0;
        padding:0}
 /*   .popup{position: absolute;top:0;left:0;right:0;background-color: white;
  display:none;
    }
    .popup ul{
        list-style-type: disc;
    }
    .popup li{
       font-size: 1rem;
        margin-left: 1rem;
        height:2rem ;
        border-bottom: 1px solid greenyellow;
        line-height: 2rem;
        padding-left: 1rem ;


    }
  #shadow{
        position:fixed;
        top:0;bottom:0;left:0;right:0;
        background-color: #4f4f4f;
        opacity: 0.4;
        display: none;
        z-index:-5;

    }

.btn{

}

    .pop {
        position: absolute;top: 0;left: 0;right:0;background-color: white;
        display: none;
    }
    .pop li{

        height: 2rem;
        border-bottom: 1px solid grey;
        line-height: 2rem;
        padding-left: 1rem;
    }
*/


    .popup{position:absolute;
        top:0;right: 0;left:0;
        background-color: white;
        z-index:15;
        display: none}

    .popup li{font-size: 1rem;
        margin-left: 1rem;
        border-bottom: 1px solid gainsboro;
        line-height:2rem ;
        list-style-type: none;
    }
    #shadow{
        position: fixed;
        top:0;bottom:0;left:0;right:0;
        background-color: #4f4f4f;
        opacity: 0.4;
        display: none;
        z-index: 5;
    }




</style>
</head>


<header style="position: relative;z-index:20;background-color: white;">

    <image style="float:left;width:3rem;height:2rem;" src="./images/top_back.png"/>
    <image  id="cat"  class="btn" style="float:right;width:3rem;height:2rem;" src="./images/top_category.png"/>
    <div style="margin: 0 3.5rem 0 3.5rem;">
    <input style="  background-image:url('./images/search.png');
    background-repeat: no-repeat;
        background-color: lightgrey;
        background-size: 2rem;
        width :100%;height:2rem ;border-radius: 3rem;border: 1px solid red; box-sizing: border-box;"  type="text"  placeholder="         输入目的地/景点/酒店自由"/>
</div></header>
<div style="position:relative">
    <div class="popup">
    <ul>
        <li>全部主题</li>
        <li>山水景观</li>
        <li>温泉度假</li>
        <li>酷夏漂流</li>
        <li>亲子庄园</li>
    </ul>
</div></div>
<div >
    <image style="width:100%" src="./images/commend.jpg"/>
</div>
<div style="height: 25px">
    <div style="float: left;width:49.75%;height:16px;display: inline;text-align: center;vertical-align:middle "  ><image style="height: 20px;" src="./images/jd_arr1.png"/>热门景点 </div>

        <div style="float: left;width:0.5%;height:20px;background-color: #CCCC99;vertical-align: middle"  ></div>
<div style="float: right;width: 49.75%;height:16px;display: inline;text-align: center;vertical-align: middle"> <image style="height: 20px;" src="./images/jd_arr2.png"/>我身边   </div>
    </div>
<div style="height:10px;background-color: #CCCC99;"></div>
<div style="height: 50px;">
<div style="id:area;float: left;width: 33%;height:3rem;display: inline;text-align: center;">位置区域<image class="btn"  src="./images/channelBg.png"></image></div>
    <div style="position: relative;">
        <div class="popup">
            <ul style="list-style-type: none;margin: 0;padding-left: 0">
                <li>全部区域 </li>
                <li>全部区域</li>
                <li>全部区域</li>
                <li>全部区域</li>
            </ul>
        </div>
    </div>



    <div style="float: left;width:0.5%;height:2.5rem;background-color: #CCCC99;vertical-align: middle"  ></div>
<div style="float:left;width: 33%;height:3rem;display: inline;text-align: center;">达人推荐<image src="./images/channelBg.png"></image></div>
    <div style="float: left;width:0.5%;height:2.5rem;background-color: #CCCC99;vertical-align: middle"  ></div>
<div style="float: right;width: 33%;height:3rem;display: inline;text-align: center;">全部主题<image src="./images/channelBg.png"></image></div>
</div>

<footer  style="height: 80px;">
<div style="float:left;width:30%;height: 80px;"><image style="height:80px;" src="./images/jd_pic.jpg"></image></div>
    <div style="float: left;width: 50%;height: 80px">
        <div>洞头望海楼景区</div>
        <div style="width: 50%">
        <div style="float:left;color: white;background-color: #ff4b1c;width:20%;padding: 0% 6%;"><span>返 </span></div>
            <div style="float: left;">&nbsp;</div>
        <div  style="float:left;color: white;background-color: #0066FF;width:20%;padding: 0% 6%;">劵</div>
         <div style="float:right;">&nbsp;</div> </div>

        <div  style="float: left;" >风景名胜</div>
        <div style="width:100%;float: left;color: #777777"><small>已售2008</small></div>
    </div>
    <div style="float: right;width: 20%;height: 80px;">
        <div>&nbsp;</div>
        <p style="color: #ff4b1c;font-size: 1.25rem;">¥<strong >100 </strong><span style="color: #777777;"><small>起</small></span></p>
        <div style="color: #777777"><s>¥240</s></div>
        <div></div>
    </div>
 </footer>
<footer style="height:5px ">   </footer>
<footer  style="height: 80px;">
    <div style="float:left;width:30%;height: 80px"><image style="height:80px;" src="./images/jd_pic.jpg"></image></div>
    <div style="float: left;width: 50%;height: 80px">
        <div>洞头望海楼景区</div>
        <div style="width: 50%">
            <div style="float:left;color: white;background-color: #ff4b1c;width:20%;padding: 0% 6%;">返</div>
            <div style="float: left;">&nbsp;</div>
            <div  style="float:left;color: white;background-color: #0066FF;width:20%;padding: 0% 6%;">劵</div>
            <div style="float:right;">&nbsp;</div> </div>

        <div  style="float: left;" >风景名胜</div>
        <div style="float: left;width:100%;color: #777777"><small>已售2008</small></div>
    </div>
    <div style="float: right;width: 20%;height: 80px;">
        <div>&nbsp;</div>
        <p style="color: #ff4b1c;font-size: 1.25rem;">¥<strong >100 </strong><span style="color: #777777;"><small>起</small></span></p>
        <div style="color: #777777"><s>¥240</s></div>
        <div></div>
    </div>
</footer>
<footer style="height:5px ">   </footer>
<footer  style="height: 80px;">
    <div style="float:left;width:30%;height: 80px"><image style="height:80px;" src="./images/jd_pic.jpg"></image></div>
    <div style="float: left;width: 50%;height: 80px">
        <div>洞头望海楼景区</div>
        <div style="width: 50%">
            <div style="float:left;color: white;background-color: #ff4b1c;width:20%;padding: 0% 6%;">返</div>
            <div style="float: left;">&nbsp;</div>
            <div  style="float:left;color: white;background-color: #0066FF;width:20%;padding: 0% 6%;">劵</div>
            <div style="float:right;">&nbsp;</div> </div>

        <div  style="float: left;" >风景名胜</div>
        <div style="float: left;width:100%;color: #777777"><small>已售2008</small></div>
    </div>
    <div style="float: right;width: 20%;height: 80px;">
        <div>&nbsp;</div>
        <p style="color: #ff4b1c;font-size: 1.25rem;">¥<strong >100 </strong><span style="color: #777777;"><small>起</small></span></p>
        <div style="color: #777777"><s>¥240</s></div>
        <div></div>
    </div>
</footer>
<div  style="float:left;width: 100%;height:0.5%;background-color: #CCCC99;"></div>
<div style="float: left;width:100%;height:14px;background-color:white;"></div>
<div style="float:left;width: 100%;height:16px;color: #777777;display: inline;text-align: center;text-align: match-parent;">点击查看更多...</div>
<footer style="background-color: #CCCC99;left:0px;right:0px;bottom: 0px;height:4rem;z-index:-10;position: fixed;">
 <div style="width:25%;box-sizing: border-box;display:inline-block;padding: 5%;padding-top: 0%;text-align: center;" ><image src="./images/bottom_home.png"><span >首页</span></image>
 </div><div style="width:25%;box-sizing: border-box;display: inline-block;padding: 5%;padding-top: 0%;text-align: center;" ><image src="./images/bottom_find.png"><span >发现</span></image>
</div><div style="width:25%;box-sizing: border-box;display: inline-block;padding: 5%;padding-top: 0%;text-align: center;" ><image src="./images/bottom_shop.png"><span >购物车</span></image>
</div><div style="width:25%;box-sizing: border-box;display: inline-block;padding: 5%;padding-top: 0%;text-align: center;" ><image src="./images/bottom_mine.png"><span >我的</span></image></div>
</footer>

<script>
 /*   var   node=$("#cat")[0];
    var area=$("#area")[0];
    var p=$(".popup")[0];
    var shadow=$("#shadow")[0];
    $("#cat").click(function(){

        if(p.style.display=="block"){
            p.style.display="none";
            shadow.style.display="none";
        }else{
            p.style.display="block";
            shadow.style.display="block";
        }} );

        function getOffsetSum(elem) {
            var top=0, left=0

            while(elem) {
                top = top + parseInt(elem.offsetTop)
                left = left + parseInt(elem.offsetLeft)
                elem = elem.offsetParent
            }

            return {top: top, left: left}
        }



    node.addEventListener("click",clickhandler);
    noareade.addEventListener("click",clickhandler);*/
 /*$(".btn[style*='center']")
    .click(function(){
        var index=$(".btn").index(this);
        if($(".popup").eq(index).css("display")=='none'){
            $(".popup").eq(index).css("display","block");
            $("#shadow").css("display","block");
        }else{
            $(".popup").eq(index).css("display","none");
            $("#shadow").css("display","none");
        }
    });*/
/* $("#cat").click(function(){
     if($(".pop").css("display")=="none"){
         $(".pop").css("display","block");
     }else{
         $(".pop").css("display","none");
     }

 });*/



 $(function(){
     $(".btn").click(function(){//$用法1
         console.log(this);
         console.log($(this)); //$用法2
         var index=$(".btn").index(this);//事件发生在谁身上 dom对象就在this这里
         var cat=document.getElementById("cat")

         if($(".popup").eq(index).css("display")=='none') {
             $(".popup").eq(index).css("display", "block");
             $("#shadow").css("display","block");
         } else{
             $(".popup").eq(index).css("display", "none");
             $("#shadow").css("display","none");
         }
     })
 })







</script>


</body>
</html>